//1. 导入这两个包 名字不能改
import React from "react"; //创建组件 虚拟DOM 生命周期
import ReactDOM from "react-dom"; //把创建好的组件 虚拟DOM 放到页面上

// import '@/07.class-组件'

const user = {
  name: "张三",
  age: 22
};

//class 关键字创建组件
class Person extends React.Component {
  constructor() {
    //继承父类React.Component,所以必须用super
    super();
    //调用super才能用 this关键字
    this.status = {
      //相当于Vue中的data返回的空对象
      msg: "这是class创建的Person组件的私有数据"
    };
  }

  //render函数作用,渲染虚拟DOM元素
  render() {
    // 必须返回合法的jsx结构
    // 外部传给组件的数据,直接用this.props调用
    return (
      <div>
        这是class创建的组件
        <hr />
        {this.props.name}
        <hr />
        {this.props.age}
        <hr />
        <h3>{this.status.msg}</h3>
      </div>
    );
  }
}

ReactDOM.render(
  <div>
    ReactDOM.render渲染的
    <hr />
    {/* <Person name={user.name} age={user.age}></Person> */}
    <Person {...user} />
  </div>,
  document.getElementById("app")
);
